<%@page isELIgnored="false" pageEncoding="UTF-8" contentType="text/html; UTF-8" %>

    <script type="text/javascript">
        var index=0;
        $(function () {



            $('#ssProduct').searchbox({
                searcher:function(value,name){
                    $("#tableProduct").datagrid("load",{
                        "columnName":name,
                        "columnValue":value,
                    });
                },
                width:300,
                menu:'#mmProduct',
                prompt:'请输入值',
            });

            $("#tableProduct").datagrid({
                url: "${pageContext.request.contextPath}/back/product/findAll",
                fit:true,
                height:100,
                autoRowHeight:true,
                fitColumns: true,
                toolbar: '#tbProduct',
                columns: [[
                    {field: "checkbox", checkbox: true},
                    {title: "封面", field: "product.cover", width: 100,formatter: function (value, row, index) {
                            return "<img style=\"width: 80px;height: 80px;display: inline-block;border-radius:10px; \"  src='${pageContext.request.contextPath}/"+row.product.cover+"'/>";
                        }},
                    {title: "名称", field: "product.name", width: 100,formatter: function (value, row, index) {
                            return "<a href='"+row.product.link+"'>"+row.product.name+"</a>";
                        }},
                    {title: "降价率", field: "product.reduction", width: 100,formatter: function (value, row, index) {
                            return row.product.reduction;
                        }},
                    {title: "最高价格", field: "product.maxprice", width: 100,formatter: function (value, row, index) {
                            return row.product.maxprice;
                        }},
                    {title: "最低价格", field: "product.minprice", width: 100,formatter: function (value, row, index) {
                            return row.product.minprice;
                        }},
                    {title: "介绍", field: "product.introduction", width: 300,formatter: function (value, row, index) {
                            return row.product.introduction;
                        }},
                    {title: "点赞数", field: "product.likes", width: 100,formatter: function (value, row, index) {
                            return row.product.likes;
                        }},
                    {title: "状态", field: "product.status", width: 100,formatter: function (value, row, index) {
                            return row.product.status==1?"上架":"下架";
                        }},
                    {title: "供货商", field: "supplier.name", width: 100,formatter: function (value, row, index) {
                            return row.supplier.name;
                        }},
                    {title: "分类", field: "catelog.name", width: 100,formatter: function (value, row, index) {
                            return row.catelog.name;
                        }},
                    {title: "品牌", field: "brand.name", width: 100,formatter: function (value, row, index) {
                            return row.brand.name;
                        }},


                    {
                        title: "操作", field: "options", width: 100, formatter: function (value, row, index) {
                            return "<a style='margin-right: 30px' onclick='showProductInfo("+JSON.stringify(row)+")' class='btnProduct' data-options=\"iconCls:'icon-ok',\">修改</a>";
                        }
                    }
                ]],
                pagination: true,
                checkOnSelect: true,
                selectOnCheck: true,
                pageList:[5,10,20,40,80,100],
                pageSize:5,
                onLoadSuccess: function () {
                    $(".btnProduct").linkbutton();
                }
            });
        });

        function showProductInfo(product) {
            console.log(product);

            $("#updateProductDialog").dialog({
                title:"商品详细信息",
                iconCls:'icon-ok',
                width:1200,
                height:800,
                modal:true,
                closable:false,
                href:"${pageContext.request.contextPath}/back/product/update.jsp",
                buttons:[{
                    text:'保存',
                    iconCls:'icon-save',
                    handler:updateProduct,
                },{
                    text:'关闭',
                    iconCls:'icon-cancel',
                    handler:function(){
                        $("#updateProductDialog").dialog("close");
                    }
                }],
                onLoad:function(){
                    product.product.catelogId=product.catelog.id;
                    product.product.brandId=product.brand.id;
                    product.product.sku=product.skuPojos;
                    product.product.tops=product.tops;
                    product.product.downs=product.downs;

                    $("#updateProductForm").form('load',product.product);
                }
            });

        }
        function uploadSku(){
            console.log(index);
            var dataTr = $("#dataTr :file");
            var fileObj = dataTr.get(0).files[0];
            if(fileObj && fileObj.size > 0){
                var formData = new FormData();
                formData.append("logoFile", fileObj); //加入文件对象
                console.log(formData);
                $.ajax({
                    type:"POST",
                    url:"${pageContext.request.contextPath}/back/file/uploadCover",
                    data:formData,
                    processData:false,
                    contentType:false,
                    success:function(data){
                        $("#ttValue").edatagrid("saveRow");
                        var ii = $("#ttValue").edatagrid("getRows").length-1;
                        var dt = $("#ttValue").edatagrid("getRows")[ii];

                        console.log("--------------------");
                        console.log($("#ttValue").edatagrid("getChanges"));
                        console.log(dt);
                        var dd = {};
                        dd.image = data.message;
                        dd.color = dt.color==null?"":dt.color;
                        dd.size = dt.size;
                        dd.weight = dt.weight;
                        dd.originPrice = dt.originPrice;
                        dd.discount = dt.discount;
                        var dat = {};
                        dat.index = ii;
                        dat.row = dd;
                        $("#ttValue").edatagrid("updateRow",dat);

                        //$("#ttValue").edatagrid("refreshRow",index);
                    }
                });
            }
        }
        function uploadUpdateSku(){
            var dataTr = $("#dataUpdateTr :file");
            var fileObj = dataTr.get(0).files[0];
            if(fileObj && fileObj.size > 0){
                var formData = new FormData();
                formData.append("logoFile", fileObj); //加入文件对象
                console.log(formData);
                $.ajax({
                    type:"POST",
                    url:"${pageContext.request.contextPath}/back/file/uploadCover",
                    data:formData,
                    processData:false,
                    contentType:false,
                    success:function(data){
                        var ii = $("#ttUpdateValue").edatagrid("getRowIndex",$("#ttUpdateValue").edatagrid("getSelected"));
                        console.log(ii);
                        var dt = $("#ttUpdateValue").edatagrid("getSelected");

                        var dd = {};
                        dd.image = data.message;
                        dd.color = dt.color;
                        dd.size = dt.size;
                        dd.weight = dt.weight;
                        dd.originPrice = dt.originPrice;
                        dd.discount = dt.discount;
                        var dat = {};
                        dat.index = ii;
                        dat.row = dd;
                        console.log(dat);
                        $("#ttUpdateValue").edatagrid("updateRow",dat);
                        $("#ttUpdateValue").edatagrid("saveRow");
                        $("#ttUpdateValue").edatagrid("refreshRow",ii);
                    }
                });
            }
        }

        //打开添加对话框
        function openAddProductDialog() {
            $("#addProductDialog").dialog({
                title:"添加商品信息",
                iconCls:'icon-save',
                width:1200,
                height:800,
                modal:true,
                href:"${pageContext.request.contextPath}/back/product/add.jsp",
                buttons:[{
                    text:'保存',
                    iconCls:'icon-save',
                    handler:saveProduct,
                },{
                    text:'关闭',
                    iconCls:'icon-cancel',
                    handler:function(){
                        $("#addProductDialog").dialog("close");
                    }
                }]
            });
        }
        (function ($) {
            $.fn.serializeJson = function () {
                var serializeObj = {};
                $(this.serializeArray()).each(function () {
                    serializeObj[this.name] = this.value;
                });
                return serializeObj;
            };
        })(jQuery);


        function valid(v){
            var d = v.edatagrid("getRows");
            var f = true;
            console.log(d);
            $.each(d,function (index,item) {
                for( var value in item){
                    console.log(item[value]);
                    if(!item[value] && value!="isNewRecord"){
                        f =  false;
                    }
                }
            })
            return f;
        }


        //保存商品信息



        function saveProduct(){

            var data={};
            var dataTr = $("#dataTr :file");
            $('#ttValue').edatagrid("saveRow");
            var fileObj1 = document.getElementsByName("addProductCover")[0].files[0];
            data.addProductCover=fileObj1;
            var fileObj2 =document.getElementsByName("addProductTop")[0].files;
            console.log(fileObj2);
            var list1={};
            for (var i = 0; i < fileObj2.length; i++) {
                list1["addProductTop[" + i + "]"] = fileObj2[i];
            }

            data.addProductTop=list1;
            var fileObj3 =document.getElementsByName("addProductDown")[0].files;
            var list2={};
            for (var i = 0; i < fileObj3.length; i++) {
                list2["addProductDown[" + i + "]"] = fileObj3[i];
            }
            data.addProductDown=list2;
            var sku = $('#ttValue').edatagrid("getData").rows;

            data.skuPojo=JSON.stringify(sku);

            var list4={};
            for (var i = 0; i < dataTr.length; i++) {
                list4["addSkuPicture[" + i + "]"] = dataTr.get(i).files[0];
            }
            data.addSkuPicture=list4;
            console.log(list4);
            console.log(data);
            $('#saveProductForm').form({
                queryParams:data,
                traditional:true,
                url:'${pageContext.request.contextPath}/back/product/add',
                onSubmit: function(){
                    return $("#saveProductForm").form("validate") && valid( $('#ttValue'));
                },
                success:function(result){
                   result = eval("("+ result +")");
                    $.messager.show({
                        title:'提示信息',
                        msg:result.message,
                        timeout:5000,
                        showType:'slide'
                    });
                    $('#addProductDialog').dialog("close");
                    $("#tableProduct").datagrid("reload");
                }
            });
            $('#saveProductForm').submit();
        }
        //更新商品信息
        function updateProduct(){
            var data={};
            var dataTr = $("#dataUpdateTr :file");
            $('#ttUpdateValue').edatagrid("saveRow");
            var fileObj2 =document.getElementsByName("updateProductTop")[0].files;
            console.log(fileObj2);
            var list1={};
            for (var i = 0; i < fileObj2.length; i++) {
                list1["updateProductTop[" + i + "]"] = fileObj2[i];
            }

            data.addProductTop=list1;
            var fileObj3 =document.getElementsByName("updateProductDown")[0].files;
            var list2={};
            for (var i = 0; i < fileObj3.length; i++) {
                list2["updateProductDown[" + i + "]"] = fileObj3[i];
            }
            data.addProductDown=list2;
            var sku = $('#ttUpdateValue').edatagrid("getData").rows;

            data.skuPojo=JSON.stringify(sku);

            var list4={};
            for (var i = 0; i < dataTr.length; i++) {
                list4["addSkuPicture[" + i + "]"] = dataTr.get(i).files[0];
            }
            data.addSkuPicture=list4;
            console.log(list4);
            console.log(data);
            $('#updateProductForm').form({
                queryParams:data,
                traditional:true,
                url:'${pageContext.request.contextPath}/back/product/update',
                onSubmit: function(){
                    return $("#updateProductForm").form("validate") && valid( $('#ttUpdateValue'));
                },
                success:function(result){
                    result = eval("("+ result +")");
                    $.messager.show({
                        title:'提示信息',
                        msg:result.message,
                        timeout:5000,
                        showType:'slide'
                    });
                    $('#updateProductDialog').dialog("close");
                    $("#tableProduct").datagrid("reload");
                }
            });
            $('#updateProductForm').submit();
        }
        function imageFormatter(value){
            return "<img style='width: 30px;height: 30px;display: inline-block;border-radius: 50%;' src='"+value+"' />";
        }
    </script>
<table id="tableProduct" class="easyui-datagird"></table>

<div id="tbProduct">
    <a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-add',plain:true,onClick:openAddProductDialog,">添加</a>

    <input id="ssProduct"></input>
    <div id="mmProduct" style="width:120px">
        <div data-options="name:'name',iconCls:'icon-ok'">名称</div>
        <div data-options="name:'introduction',iconCls:'icon-ok'">介绍</div>
        <div data-options="name:'status',iconCls:'icon-ok'">状态</div>
        <div data-options="name:'supplierId',iconCls:'icon-ok'">供货商</div>
    </div>
</div>

<%--添加对话框--%>
<div id="addProductDialog" ></div>
<%--更新对话框--%>
<div id="updateProductDialog"></div>
